<template>
  <div class="searchArticleDiv">
    <div v-if="searchArticleContent.length === 0">
      <el-empty description="没有相关文章/帖子哦" />
    </div>
    <div v-else>
      已搜索到:{{ searchPostSize }}条文章/{{ searchArticleSize }}条帖子 共{{ searchArticleSize+searchPostSize }}条
      <div v-for="item in searchArticleContent">
        <div class="articleDiv">
          <div style="height: 10px" />
          <div style="margin: 4%;max-width: 960px">
            <div>
              <div style="display: inline-block">类型:</div>
              <div v-if="item.articlePost === 2" style="display: inline-block">帖子</div>
              <div v-if="item.articlePost === 1" style="display: inline-block">文章</div>
            </div>
            <div style="font-weight: bolder;font-size: 110%">
              {{ item.users.usersName }}:<a @click="articleTitle(item.articleId)">{{ item.articleTitle }}</a>
            </div>
            <div class="articleContentDiv" v-html="transitionHtml(item.articleContent)" />
          </div>
          <div style="height: 10px" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navigation from "../../../components/navigation";
import {marked} from "marked";
import {gotoNewWindow} from "../../../utils/sameMethod";
export default {
  name: "searchArticle",
  components:{navigation},
  data(){
    return{
      searchArticleContent:[],
      commentListSize:0,
      searchArticleSize:0,
      searchPostSize:0
    }
  },
  methods:{
    transitionHtml(content){
      return marked(content);
    },
    articleTitle(articleId){
      gotoNewWindow(articleId,"content","detail");
    },
  },
  created() {
    this.searchArticleContent=JSON.parse(sessionStorage.getItem("searchArticleContent"))
    this.searchArticleSize=JSON.parse(sessionStorage.getItem("searchArticleSize"))
    this.searchPostSize=JSON.parse(sessionStorage.getItem("searchPostSize"))
  },
  mounted() {
    document.title="搜索页面 - 贴乎";
  }
}
</script>

<style scoped>
.articleDiv{
  box-shadow: 0 2px 59px rgba(0, 0, 0, .12), 0 0 60px rgba(0, 0, 0, .04);
  margin-top: 39px;
  border-radius: 20px;
}
.searchArticleDiv{
  margin: auto;
  margin-top: 80px;
  max-width: 780px;
}
.articleContentDiv{
  display: -webkit-box;
  display: -moz-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
  margin-top: 6px;
}
.articleContentDiv >>> img{
  display: none;
}
</style>